<template>
    <ak-header data-display="false">
    </ak-header>

    <ak-main data-bounce="false">
        <button type="button" class="plug_back pos_fix left_0 top_0 ml_1rem mt_1rem wh_28rem text_al_c z_index_8 bg_theme05 bor_rad_50" data-href="/page1" data-back="true"><!--data-href指定路径时通过data-back属性判断该按钮是不是返回按钮（判断页面切换效果）-->
            <i class="fs_14rem icon-ln_zhixiangzuo c_white"></i>
        </button>
        <ak-scrollview data-bounce="true">
            <div class="module press plug_DropLoad">
                <ul>
                </ul>
            </div>
        </ak-scrollview>
    </ak-main>

    <ak-footer data-display="true">
        <fieldset class="h_in bor_top bor_gray_ddd bg_gray_f9f length2">
            <legend class="fl h_100 line_h_32rem c_gray_777 text_al_c" data-href="/page4">应付金额：<span class="c_orange font_bold">¥100.00</span></legend>
            <button type="button" class="fl bg_theme h_100 c_white">立即支付</button>
        </fieldset>
    </ak-footer>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域

    /*-----------------------------------------------AKjs_GoTop (全局) 使用方法-------------------------------------------*/
    $(function() {
        AKjs_GoTop({
            dom: $("#ak-scrollview"), // 滑动区域
            hide: true, //当页面不滚动时是否隐藏(true,false)
            url: "./img/gotop.png", //图片路径
            icon: "", //图标的Class
            state: "bottom", //出现的位置(center, bottom)
            height: "auto", //高 默认40px
            width: "2.4rem", //宽 默认40px
            scrollTop: 50, //滚到什么位置出现 px
            time: 500, //返回顶部多长时间 ms 默认500ms
            hidetime: 1000, //图标隐藏的时间&刚开始淡入的时间 ms 默认1000ms
            aimation: "animated bounceInDown", //出场动画 默认show（没有出场动画） 这个可以自定义
            toTop: function () { //返回最顶部后的回调
                //console.log("toTop");
            },
            toShow: function () { //按钮显示后的回调
                //console.log("toShow");
            },
            toHide: function () { //按钮隐藏后的回调
                //console.log("toHide");
            },
            toClick: function () { //按钮点击后的回调
                //console.log("toClick");
            }
        });
    });

    /*-----------------------------------------------AKjs_Keyboard 使用方法-------------------------------------------*/
    $(function() {
        var plug_keyboard = $.AKjs_Keyboard({
            num: 6, //密码输入框需要几位数?
            title: "请输入支付密码", //安全键盘标题
            msg: "正在验证支付密码", //输入密码后的loading文字
            cancel: "取消", //取消按钮的文字
            callback: function(data,ele) {
                //console.log(ele); //安全键盘的元素
                //console.log(data); //密码数组
                if (data.join('') != "123456") {
                    setTimeout(function() {
                        plug_keyboard.akjs_reset("支付密码错误，请重新输入！"); //密码错误提示
                    }, 2000);
                } else {
                    setTimeout(function() {
                        ele.find("figure img").remove();
                        ele.find("figure em").text("恭喜您！您支付成功了!");
                        plug_keyboard.akjs_hideKeyBoard(); //隐藏安全键盘
                    }, 2000);
                    setTimeout(function() {
                        AKjs_Location("/page1");
                    }, 3000);
                }
            }
        });
        /*ak-header和ak-footer里面的所有DOM元素操作请使用以下的“delegate”方法*/
        $(document).delegate("fieldset button","click", function(e){
            e.preventDefault();
            plug_keyboard.akjs_showKeyBoard(); //展开安全键盘
        });
    });

    /*-----------------------------------------------AKjs_DropLoad 使用方法-------------------------------------------*/
    $(function() {
        // 页数
        var page = 0;
        // 每页展示20个
        var size = 20;
        $('.plug_DropLoad').AKjs_DropLoad({
            scrollArea : window, // 滑动区域
            domUp : { // 上方DOM
                domRefresh : '↓ 下拉刷新',
                domUpdate  : '↑ 释放更新',
                domLoad    : '刷新中...'
            },
            domDown : { // 下方DOM
                domRefresh : '↑ 上拉加载更多',
                domLoad    : '加载中...',
                domNoData  : '暂无数据'
            },
            autoLoad : true,// 自动加载
            distance : 20,// 拉动距离
            loadUpFn : function(me){ //上方function
                AKjs_Ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php',
                    dataType: 'json',
                    success: function(data){
                        // 为了测试，延迟3秒加载
                        setTimeout(function(){
                            // 每次数据加载完，必须重置
                            me.resetload(); //重新初始化控件以及标识量
                            me.unlock(); //解除锁定允许数据继续加载
                            me.noData(false); //是否有数据（false代表有数据）
                        },1000);
                    },
                    error: function(xhr, type){
                        AKjs_WebToast("数据请求加载失败！请稍后再试。!","middle",3000);
                        // 即使加载出错，也得重置
                        //me.resetload(); //重新初始化控件以及标识量
                    }
                });
            },
            loadDownFn : function(me){ //下方function
                page++;
                // 拼接HTML
                var result = '';
                AKjs_Ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.length;
                        if(arrLen > 0){
                            for(var i=0; i<arrLen; i++){
                                result
                                    +='     <li class="bg_white ovh mb_5">'
                                    + '        <article class="pos_rel w_100 ovh line_h_18rem active_gray_f5f" data-href="/page2">'
                                    + '            <div class="ovh wp_94 mt_1rem mb_05rem pb_05rem">'
                                    + '                <img src="'+data[i].pic+'" class="dis_block fl wh_32rem bg_gray_eee bor_rad_50 defer_none" />'
                                    + '                <h3 class="fl ovh w_80 ml_05rem">'+data[i].title+'</h3>'
                                    + '            </div>'
                                    + '            <ol class="w_100 ovh bor_top_dashed bor_gray_ddd length2 list_h_3rem">'
                                    + '                <li class="fl text_al_c">订单价格：<em class="c_orange fs_12rem">待定</em></li>'
                                    + '                <li class="fr text_al_c">上市日期：<em class="c_jd">'+data[i].date+'</em></li>'
                                    + '            </ol>'
                                    + '        </article>'
                                    + '     </li>';
                            }
                            // 如果没有数据
                        }else{
                            // 数据锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟3秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('.plug_DropLoad').children("ul").append(result);
                            AKjs_HashSharp(); //因元素延迟生成导致data-href方法失效，重新调用超链接方法；
                            // 每次数据插入，必须重置
                            me.resetload(); //重新初始化控件以及标识量
                        },1000);
                    },
                    error: function(xhr, type){
                        AKjs_WebToast("数据请求加载失败！请稍后再试。!","middle",3000);
                        // 即使加载出错，也得重置
                        //me.resetload(); //重新初始化控件以及标识量
                    }
                });
            }
        });
    });

</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
* ak-header和ak-footer元素的data-display值是隐藏和显示APP的头部区域和底部菜单区域 (true / false)；
ak-main和ak-scrollview元素的data-bounce值是滚动区域是否开启ios弹性效果的功能 (true / false)；
button元素的data-back="true"值是识别为该按钮是返回键的意思
//注：template，ak-header，ak-footer，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-header>头部区域</ak-header>
    <ak-main>
        <ak-scrollview>
            <div>中间内容</div>
        </ak-scrollview>
        <dialog>弹窗代码</dialog>
    </ak-main>
    <ak-footer>底部区域</ak-footer>
</template>
<script>
    //编写当前页面的脚本代码区域
</script>
<style>
    //覆盖当前界面的样式区域
</style>
-->